<template>
  <div style="height: 100%" ref="echart"></div>
</template>

<script>
import echarts from "echarts";
export default {
  props: {
    chartData: {
      type: Object,
      default() {
        return {
          xData: [], //折线图x轴数据
          series: [],
          yAxis: {},
        };
      },
    },
    isAxisChart: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    options() {
      return this.isAxisChart ? this.barOption : this.pieOption;
    },
  },
  watch: {
    //监听事件
    chartData: {
      handler: function() {
        this.initChart();
      },
      deep: true,
    },
    isCollapse() {
      setTimeout(() => {
        this.resizeChart();
      }, 500); //300毫秒就进行一个回调函数，图形进行自适应
    },
  },
  methods: {
    initChart() {
      this.initChartData();
      //取到组件进行初始化
      if (this.echart) {
        this.echart.setOption(this.options);
      } else {
        this.echart = echarts.init(this.$refs.echart);
        this.echart.setOption(this.options);
      }
    },
    initChartData() {
      //if (this.isAxisChart) {
        //this.axisOption.title = this.chartData.title;
        this.barOption.xAxis[0].data = this.chartData.yAxis.data;
        this.barOption.series[0].data = this.chartData.series;
        
      //} else {
        
     // }
    },
    resizeChart() {
      this.echart ? this.echart.resize() : ""; //对折线图的调整
    },
    mounted() {
      window.addEventListener("resize", this.resizeChart); //创建窗口界面自适应
    },
    destroyed() {
      window.removeEventListener("resize", this.resizeChart); //销毁
    },
  },
  data() {
    return {
      echart: null,
      axisOption: {
        legend: {
          textStyle: {
            color: "#333333",
          },
        },
        tooltip: {
          //折线图使用的定位功能
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        xAxis: {
          type: "category",
          data: [],
          axisLine: {
            lineStyle: {
              color: "#17b3a3",
            },
          },
        },
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#17b3a3",
              },
            },
          },
        ],
        series: [],
      },
      pieOption: {
        
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: {
              show: true,
              type: ["pie", "funnel"],
            },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "区域分布",
            type: "pie",
            radius: [30, 110],
            center: ["75%", "50%"],
            roseType: "area",
            data: [],
          },
        ],
      },
      barOption: {
        color: ["#2f89cf"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "0%",
          top: "10px",
          right: "0%",
          bottom: "4%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              color: "#ffeb7b",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              // 修改刻度标签 相关样式
              color: "#ffeb7b",
              fontSize: 12,
            },
            axisLine: {
              // y轴的线条改为了 2像素
              lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 2,
              },
            },
            splitLine: {
              // y轴分割线的颜色
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
          },
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            barWidth: "60%",
            data: [],
            itemStyle: {
              // 修改柱子圆角
              barBorderRadius: 5,
            },
          },
        ],
      },
    };
  },
};
</script>

<style lang="scss" scoped></style>
